<template>
  <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <!-- 添加按钮 -->
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addDialogVisible = true">添加角色</el-button>
                </el-col>
            </el-row>
        <!-- 角色列表 -->
        <el-table :data="roleList" border stripe>
            <!-- 展开列 -->
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-row>
                        <!-- 渲染三级权限 -->
                        <el-col >
                            <el-tag  v-for=" item in scope.row.permissions" :key="item.id" closable @close="removePermissionById(item.id)">
                                {{item.permissionName}}
                            </el-tag>
                            <template v-if="scope.row.permissions.length === 0">无任何权限</template>
                        </el-col>
                    </el-row>
                    
                </template>
            </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column label="角色" prop="roleName"></el-table-column>
            <el-table-column label="操作" prop="roleName" width="300px">
               <template slot-scope="scope"  >
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.roleId)" >编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeRoleById(scope.row.roleId)">删除</el-button>
                    <el-button size="mini" type="warning" icon="el-icon-setting" @click="setPermission(scope.row)" >分配权限</el-button>
               </template>
            </el-table-column>
        </el-table>
        <!-- 添加用户的对话框 -->
                <el-dialog
                title="添加角色"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addDialogClosed">
                    <!-- 内容主体区域 -->
                    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" >
                        <el-form-item label="角色名称" prop="roleName">
                            <el-input v-model="addForm.roleName"></el-input>
                        </el-form-item>
                    </el-form>
                    <!-- 底部区域 -->
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addRole">确 定</el-button>
                    </span>
                </el-dialog>
        <!-- 修改角色对话框 -->
            <el-dialog
                title="修改角色"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editDialogClosed"
                >
                <el-form :model="editFrom" :rules="editFromRules" ref="editFromRef" label-width="100px" >
                    <el-form-item label="id">
                        <el-input v-model="editFrom.roleId" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="editFrom.roleName"></el-input>
                    </el-form-item>
                </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editRoleInfo">确 定</el-button>
                  </span>
            </el-dialog>    
        </el-card>
        <!-- 分配角色 -->
        <el-dialog
            title="分配权限"
            :visible.sync="setPermissionDialogVisible"
            width="50%"
            @closed="setRoleDialogClosed"
            >
            <div>
                <p>当前的角色：{{roleInfo.roleName}}</p>
                <p>当前的权限：
                    <template >
                        <div>
                            <ul>
                                <li v-for="item in roleInfo.permissions" :key="item.id">
                                    <template v-if="item.id !== null">{{item.permissionName}}</template>
                                    <template v-else>无任何权限</template>
                                </li>
                            </ul>
                        </div>
                    </template> 
                </p>
                <!-- 分配角色 -->
                <p>分配新的权限：
                    <el-select v-model="selectedPermissionId" placeholder="请选择">
                        <el-option
                        v-for="item in permissionList"
                        :key="item.id"
                        :label="item.permissionName"
                        :value="item.id"
                        :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setPermissionDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="savePermissionInfo">确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
        return {
            //所有角色列表数据
            roleList: [],
            addDialogVisible: false,
            addForm: {
                roleName: ''
            },
            addFormRules: {
              roleName: [
                  { required: true, message: '请输入角色名称', trigger: 'blur'}
              ]
            },
            editDialogVisible: false,
            editFrom: {},
            editFromRules: {
              roleName: [
                  { required: true, message: '请输入角色名称', trigger: 'blur'}

              ]
            },
            //控制分配权限的显示与隐藏
            setPermissionDialogVisible: false,
            //需要被分配权限的角色信息
            roleInfo: {},
            //所有权限的数据列表
            permissionList: {},
            //已选中的权限
            selectedPermissionId: ''
        }
    },
    created() {
        this.getRoleList()
    },
    methods: {
        //获取所有角色列表
        async getRoleList() {
            const {data: res} = await this.$http.get('/api/role/getAll')
            if (res.code !==200) {
                return this.$message.error(res.msg);
            }
            this.roleList = res.data
            console.log(res.data);
        },
         addDialogClosed() {
            this.$refs.addFormRef.resetFields()
        },
        addRole() {
            this.$refs.addFormRef.validate(async valid =>{
                if (!valid) return
                //发起添加角色请求
                const {data: res} = await this.$http.put('/api/role/addRole',this.addForm)
                if(res.code !==200) { return this.$message.error(res.msg)}
                this.$message.success(res.msg)
                this.addDialogVisible = false
                //重新获取角色列表数据
                this.getRoleList()
            })
        },
        //修改角色信息
        async showEditDialog(id) {
            const {data: res} = await this.$http.post('/api/role/getRole',{roleId:id})
            if (res.code !==200) {
                return this.$message.error('查询用户数据失败')
            }
            this.editFrom = res.data
            this.editDialogVisible = true
        },
        //监听用户修改对话框的关闭时间
        editDialogClosed() {
            this.$refs.editFromRef.resetFields()
        },
        //修改用户信息并提交
        editRoleInfo() {
            this.$refs.editFromRef.validate(async valid =>{
                if (!valid) {
                    return
                }
                //发起表单修改
                const {data: res} = await this.$http.put('/api/role/updateRole',this.editFrom)
                if (res.code !== 200) {
                    return this.$message.error(res.msg)
                }
                //关闭对话框
                this.editDialogVisible = false
                //刷新数据列表
                this.getRoleList()
                //提示修改成功
                return this.$message.success(res.msg)
            })
        },
        //根据id永久删除角色
        async removeRoleById(id) {
            //弹框是否删除数据
            const confirmResult = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).catch(err =>  err)
            //如果用户确认删除则返回字符串confrim
            //如果用户取消删除则返回值为字符串cancel
            if (confirmResult !== 'confirm') {
                return this.$message.info('已取消删除')
            }
            const {data: res} = await this.$http.post('/api/role/deleteRole', {roleId:id})
            if (res.code !==200) {
                return this.$message.error(res.msg)
            }
            this.getRoleList()
            this.$message.success(res.msg)
        },
        //展示分配权限对话框
        async setPermission(roleInfo) {
            this.roleInfo = roleInfo
            //获取所有权限列表
            const { data: res} = await this.$http.get('/api/permission/getAll')
            if (res.code !== 200) {
                return this.$message.error(res.msg)
            } else {
                this.permissionList = res.data
            }
            this.setPermissionDialogVisible = true
        },
        //点击按钮分配权限
        async savePermissionInfo() {
            if (!this.selectedPermissionId) {
                return this.$message.error('请选择要分配的角色')
            }
            const {data: res} = await this.$http.put('/api/permission/insertPermissionForRole',{ 
             roleId: this.roleInfo.roleId,
             permissionId: this.selectedPermissionId
             })
            if (res.code !== 200) {
                return this.$message.error(res.msg)
            } else {
                this.getRoleList()
                this.setPermissionDialogVisible = false
                return this.$message.success(res.msg)
            }
        },
        //监听分配权限对话框的关闭时间
        setRoleDialogClosed() {
            this.selectedPermissionId= ''
            this.permissionList= {}
        },
        //根据id删除对应权限
        async removePermissionById(id) {
            //弹框是否删除数据
            const confirmResult = await this.$confirm('此操作将永久删除该角色的权限, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).catch(err =>  err)
            //如果用户确认删除则返回字符串confrim
            //如果用户取消删除则返回值为字符串cancel
            if (confirmResult !== 'confirm') {
                return this.$message.info('已取消删除')
            }
            const {data: res} = await this.$http.post('/api/permission/deleteOnePermission', {srpId:id})
            if (res.code !==200) {
                return this.$message.error(res.msg)
            }
            this.getRoleList()
            this.$message.success(res.msg)
        }
    }
}
</script>

<style lang="less" scoped>
.el-tag {
    margin: 7px;
}
</style>